
body {
    font-family: Verdana, sans-serif;
    background-color: #eeeeee;
}

#body {
    margin: 0 auto;
    width: 860px;
    padding: 10px;
    height: 100%;
    position: relative;
}

.frame, .plaque {
    color: white;
    position: absolute;
    height: 200px;
    width: 200px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

.frame > div, .plaque > div {
    position: absolute;
    height: 160px;
    width: 160px;
    padding: 20px 20px;
    overflow: hidden;
}

.plaque > div {
    background: url(plaque.png);
}

.plaque > div > div, .frame > div > div {
    position: absolute;
    height: 160px;
    width: 160px;
    margin: 0;
    padding; 0;
    overflow: hidden;
}

#features {
    position: absolute;
    top: 0; left: 0;
}

.plaque.a { background-color: #112277; }
.plaque.b { background-color: #113333; }
.plaque.c { background-color: #331133; }
.plaque.d { background-color: #110033; }

.small > .frame.x.c > div > div {
    background: url(slides.png) 160px 160px;
}
.small > .frame.y.c > div > div {
    background: url(slides.png) 160px 320px;
}
.small > .frame.z.c > div > div {
    background: url(slides.png) 160px 0px;
}

.portable > .frame.x.c > div > div {
    background: url(slides.png) 320px 320px;
}
.portable > .frame.y.c > div > div {
    background: url(slides.png) 320px 160px;
}
.portable > .frame.z.c > div > div {
    background: url(slides.png) 320px 0px;
}

.powerful > .frame.x.c > div > div {
    background: url(slides.png) 0px 0px;
}
.powerful > .frame.y.c > div > div {
    background: url(slides.png) 0px 320px;
}
.powerful > .frame.z.c > div > div {
    background: url(slides.png) 0px 160px;
}

.x { top: 0px; }
.y { top: 220px; }
.z { top: 440px; }

.a { left: 0px; }
.b { left: 220px; }
.c { left: 440px; }
.d { left: 660px; }

.b { line-height: 140px; }

h1 {
    padding: .2em;
    margin: .2em;
    font-size: 22px;
}

h2 {
    font-size: 20px;
    padding: 8px 0;
    margin: 0;
}

h3 {
    font-size: 18px;
    padding: 5px 0;
    margin: 0;

}

code b {
    color: #ffffff;
}

ul {
    padding-left: 1.2em;
    margin: 0;
}

a {
    color: white;
}

a:hover {
    color: #dddddd;
}

.slide {
    margin: 0px;
    padding: 0px;
    position: absolute;
}

.center > .frame > div > div {
    text-align: center;
}

#reference {
    cursor: pointer;
}

#samples {
    cursor: pointer;
}

#samples h3 {
    display: none;
}

.superfluous {
    display: none;
}

